<template>
  <el-link :underline="false" @click="handelClick">
    <span class="i-custom-trashed wh-14px mr-6px"></span>
    <template v-if="showText">{{ text }}</template>
  </el-link>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'

  defineOptions({
    name: 'OptionTrashed',
  })

  const props = withDefaults(
    defineProps<{
      returnByQuery?: boolean
      right?: boolean
      showText?: boolean
      text?: string
      trashedRoute: string
    }>(),
    {
      text: '回收站',
      showText: true,
      returnByQuery: false,
      right: false,
    }
  )

  const emits = defineEmits<{
    (e: 'on-click'): void
  }>()

  const router = useRouter()
  const route = useRoute()

  const handelClick = () => {
    if (props.returnByQuery) {
      // 打开指定的 route name 组件，并通过 $route.params 将参数完整带过去
      router.push({ name: props.trashedRoute, query: { return: route.fullPath } })
    } else {
      router.push({ name: props.trashedRoute })
    }

    emits('on-click')
  }
</script>
